<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- meta:desc -->
    <meta name="description" content="小兔鲜儿官网，致力于打造全球最大的食品、生鲜电商购物平台。">
    <!-- meta:kw -->
    <meta name="keywords" content="小兔鲜儿，食品，生鲜，服装，家电，电商，购物">
    <title>游戏便当-热爱、有趣、快捷！</title>
    <!-- link:favicon -->
    <link rel="shortcut icon" href="./images/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <!-- 快捷导航 -->
    <div class="shortcut">
        <!-- logo -->
        <div class="logo">
            <h1><a href="#">游戏便当</a></h1>
        </div>
        <!-- 头像 -->
        <div class="avatar">
            <a href="" title="点击查看个人信息"><img src="./images/avatar.png" id="toux"></a>
        </div>
    </div>

    <div class="host">

        <div class="bdleft">
            <!-- 左侧导航 -->
            <div class="sidebar">
                <ul>
                    <li><a href="#"><span class="iconfont icon-zhuye"></span></a></li>
                </ul>

                <!-- 域 -->
                <div id="main-container">
                    <div id="plus-sign">⊕</div>
                    <a href="www.baidu.com">
                        <div id="domain-avatars-container"></div>
                    </a>
                </div>

                <!-- 右键菜单 -->
                <div id="context-menu" class="context-menu">
                    <ul>
                        <li id="delete-domain">删除域</li>
                        <li id="leave-domain">退出域</li>
                    </ul>
                </div>

                <!-- 创建或加入域的模态框 -->
                <div id="myModal" class="modal">
                    <span id="set">创建或加入域</span>
                    <div class="modal-content">
                        <span class="close">&times;</span>
                        <div class="litext">
                            <p>自己创建一个域并邀请玩伴加入</p>
                        </div>
                        <button id="create-btn">创建</button>
                        <label for="domain-id" class="add">请输入域ID搜索已存在域</label>
                        <input type="text" id="domain-id">
                        <button id="search-btn">搜索</button>
                        <div id="search-result" class="search-result">
                            <!-- 搜索结果显示在这里 -->
                        </div>
                        <button id="join-btn" style="display: none;">加入</button>
                    </div>
                </div>

                <!-- 创建域的模态框 -->
                <div id="create-domain-modal" class="modal">
                    <div class="modal-content">
                        <span class="close" id="close-create-domain-modal">&times;</span>
                        <div class="litext">
                            <p>请输入域名并选择头像</p>
                        </div>
                        <label for="domain-name">域名：</label>
                        <input type="text" id="domain-name" placeholder="请输入域名">
                        <label for="avatar-upload">选择头像：</label>
                        <input type="file" id="avatar-upload" accept="image/*">
                        <div id="avatar-preview" class="avatar-preview">
                            <!-- 头像预览将显示在这里 -->
                        </div>
                        <button id="confirm-create-btn">确认创建</button>
                    </div>
                </div>

                <script src="./js/script.js"></script>
                <script src="./js/abandon.js"></script>
            </div>
        </div>
    </div>



    <div class="bdright">
        <!-- 官方推荐 -->
        <div class="goods wrapper">
            <!-- 标题 -->
            <div class="title">
                <div class="left">
                    <h3>官方推荐</h3>
                    <p>官方推荐 品质靠谱</p>
                </div>
                <div class="right">
                    <a href="#" class="more">查看全部<span class="iconfont icon-arrow-right-bold"></span></a>
                </div>
            </div>
            <!-- 内容 -->
            <div class="bd">
                <ul>
                    <li>
                        <a href="#">
                            <div class="pic"><img src="./images/图1-1.png" alt=""></div>
                            <div class="txt">
                                <h4>官方活动/问题反馈</h4>
                                <p>·<span>354,791热度</span></p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="pic"><img src="./images/图1-2.png" alt=""></div>
                            <div class="txt">
                                <h4>猎杀：对决</h4>
                                <p>·<span>295,189热度</span></p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="pic"><img src="./images/图1-3.png" alt=""></div>
                            <div class="txt">
                                <h4>CS2</h4>
                                <p>·<span>254,165热度</span></p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="pic"><img src="./images/图1-4.png" alt=""></div>
                            <div class="txt">
                                <h4>英雄联盟</h4>
                                <p>·<span>244,658热度</span></p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="pic"><img src="./images/图1-5.png" alt=""></div>
                            <div class="txt">
                                <h4>彩虹六号：围攻</h4>
                                <p>·<span>185,369热度</span></p>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
        </div>

        <!-- 热门推荐 -->
        <div class="recommend wrapper">
            <!-- 标题 -->
            <div class="title">
                <div class="left">
                    <h3>热门推荐</h3>
                    <p>热门推荐 品质优秀</p>
                </div>
            </div>
            <!-- 内容 -->
            <div class="bd">
                <ul class="addextra">
                    <li>
                        <a href="#">
                            <div class="pic"><img src="./images/图2-1.png" alt=""></div>
                            <div class="txt">
                                <h4>皮特174</h4>
                                <p>·<span>185,369热度</span></p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="pic"><img src="./images/图2-2.png" alt=""></div>
                            <div class="txt">
                                <h4>逃离塔科夫</h4>
                                <p>·<span>135,467热度</span></p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="pic"><img src="./images/图2-3.png" alt=""></div>
                            <div class="txt">
                                <h4>无畏契约玩家社区</h4>
                                <p>·<span>84,558热度</span></p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="pic"><img src="./images/图2-4.png" alt=""></div>
                            <div class="txt">
                                <h4>北</h4>
                                <p>·<span>79,497热度</span></p>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
        </div>

        <!-- 风格展示 -->
        <div class="fresh wrapper">
            <!-- 标题 -->
            <div class="title">
                <div class="left">
                    <h3>风格展示</h3>
                </div>
                <div class="right">
                    <a href="#" class="more">查看全部<span class="iconfont icon-arrow-right-bold"></span></a>
                </div>
            </div>
            <!-- 内容 -->
            <div class="content">
                <div class="left">
                    <a href="#"><img src="./images/图3-1.png" id="left1"></a>
                </div>

            </div>
        </div>

        <!-- 周边社区 -->
        <div class="brand">
            <div class="wrapper">
                <!-- 标题 -->
                <div class="title">
                    <div class="left">
                        <h3>周边社区</h3>
                        <p>周边社区 尽情探索</p>
                    </div>
                    <!-- 按钮 -->
                    <div class="button">
                        <a href="#" class="prev">
                            <i class="iconfont icon-arrow-left-bold"></i>
                        </a>
                        <a href="#" class="next">
                            <i class="iconfont icon-arrow-right-bold"></i>
                        </a>
                    </div>
                </div>
                <!-- 内容 -->
                <div class="bd">
                    <ul>
                        <li>
                            <a href="#">
                                <div class="pic"><img src="./images/图1-1.png" alt=""></div>
                                <div class="txt">
                                    <h4>官方活动/问题反馈</h4>
                                    <p>·<span>354,791热度</span></p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="pic"><img src="./images/图1-2.png" alt=""></div>
                                <div class="txt">
                                    <h4>猎杀：对决</h4>
                                    <p>·<span>295,189热度</span></p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="pic"><img src="./images/图1-3.png" alt=""></div>
                                <div class="txt">
                                    <h4>CS2</h4>
                                    <p>·<span>254,165热度</span></p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="pic"><img src="./images/图1-4.png" alt=""></div>
                                <div class="txt">
                                    <h4>英雄联盟</h4>
                                    <p>·<span>244,658热度</span></p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="pic"><img src="./images/图1-5.png" alt=""></div>
                                <div class="txt">
                                    <h4>彩虹六号：围攻</h4>
                                    <p>·<span>185,369热度</span></p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="pic"><img src="./images/图1-1.png" alt=""></div>
                                <div class="txt">
                                    <h4>官方活动/问题反馈</h4>
                                    <p>·<span>354,791热度</span></p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="pic"><img src="./images/图1-2.png" alt=""></div>
                                <div class="txt">
                                    <h4>猎杀：对决</h4>
                                    <p>·<span>295,189热度</span></p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="pic"><img src="./images/图1-3.png" alt=""></div>
                                <div class="txt">
                                    <h4>CS2</h4>
                                    <p>·<span>254,165热度</span></p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="pic"><img src="./images/图1-4.png" alt=""></div>
                                <div class="txt">
                                    <h4>英雄联盟</h4>
                                    <p>·<span>244,658热度</span></p>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="pic"><img src="./images/图1-5.png" alt=""></div>
                                <div class="txt">
                                    <h4>彩虹六号：围攻</h4>
                                    <p>·<span>185,369热度</span></p>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

    </div>
    </div>

    </div>
</body>

</html>